<template>
  <div class="wb" style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;" v-loading="loadingPage"  element-loading-text="正在生成excel...">
    <div style="display: inline;" class="aForm">
      <el-form :inline="true" class="demo-form-inline" style="width:70%">
        <el-form-item label="">
          <el-col :span="11">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.startTime" placeholder="选择日期" style="width: 80%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1" style="margin-left: -25px;">至</el-col>
          <el-col :span="11">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.endTime" placeholder="选择日期" style="width: 80%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item style="margin-left: -70px;">
          <el-button type="primary" class="search" @click="getGzWbDetail">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: center;margin-bottom: 10px;font-weight: bold;font-size: 20px;color: #333333;">
      <el-button type="success" style="float: left" class="bt_button" @click="exportTemplate"><i class="el-icon-upload"></i> 导出</el-button>
        工装维护保养记录表
    </div>
    <wh-table @getBackData="getBackData"   :backCount="backCount" :height="'675'" :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option"
              style="margin-top: 5px">
    </wh-table>
    <form action="/api/autoMonitor/by/exportExcelwbData"  method="post"
          style="display: none;" ref="downRepairLoadExcel">
      <input name="json" :value="templateExcel.json"/>
      <input name="type" value="1"/>
      <input name="addCol" value="1"/>
      <input name="title" value="维保记录"/>
    </form>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import {formatDate} from '@/utils/formatDate'

  export default {
    name: 'gzRepair',
    data() {
      return {
        loadingPage:false,
        backCount:0,
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        option: {showOperate: false, headerCell: {background: 'rgb(214, 215, 216)', color: 'rgba(0, 0, 0, 0.8)'}},
        repairData: {},
        repairLog: {},
        queryForm: {startTime:"",endTime:"",carType:""},

        templateExcel:{json:""},
      }
    },
    components: {
      whTable
    },

    mounted() {
      let self = this;
      self.getGzWbDetail();
    },
    methods: {

      getGzRepairList() {
        this.getGzWbDetail();
      },

      exportTemplate(){
        let self = this;
        let tableHeader = [
          {"columnName": "produceCode", "coloumNameCn": "产品图号"},
          {"columnName": "productName", "coloumNameCn": "产品名称"},
          {"columnName": "carType", "coloumNameCn": "车型"},
          {"columnName": "gzCode", "coloumNameCn": "工装编号"},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "count", "coloumNameCn": "数量"},
          {"columnName": "dic_01", "coloumNameCn": "定位零件"},
          {"columnName": "dic_02", "coloumNameCn": "易损耗部件"},
          {"columnName": "dic_03", "coloumNameCn": "底脚支撑块"},
          {"columnName": "dic_04", "coloumNameCn": "导向零件"},
          {"columnName": "dic_05", "coloumNameCn": "螺栓"},
          {"columnName": "dic_06", "coloumNameCn": "肘夹"},
          {"columnName": "dic_07", "coloumNameCn": "标识"},
          {"columnName": "dic_08", "coloumNameCn": "清洁"},
          {"columnName": "dic_09", "coloumNameCn": "润滑"},
          {"columnName": "dic_10", "coloumNameCn": "检查"},
          {"columnName": "repairMan", "coloumNameCn": "保养但当"},
          {"columnName": "createTimeFt", "coloumNameCn": "保养时间"},
        ];
        let  tableData = [];
        let index = 1;
        for(let data of self.tableData){
          let d = Object.assign({},data);
          d.index = index+"";
          tableData.push(d);
          index++;
        }
        let headers = {tableHeader:tableHeader};
        self.templateExcel.json = JSON.stringify(headers);
        self.$nextTick(()=>{
          self.$refs.downRepairLoadExcel.submit();
        })
      },

      handleDefaultTab() {
        let self = this;
        self.tableHeader = [{"columnName": "produceCode", "coloumNameCn": "产品图号"},
          {"columnName": "productName", "coloumNameCn": "产品名称"},
          {"columnName": "carType", "coloumNameCn": "车型"},
          {"columnName": "gzCode", "coloumNameCn": "工装编号"},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "count", "coloumNameCn": "数量"},
          {"columnName": "produce", "coloumNameCn": "维护保养项目","children":[
              {"columnName": "dic_01", "coloumNameCn": "定位零件","minWidth":"100"},
              {"columnName": "dic_02", "coloumNameCn": "易损耗部件","minWidth":"100"},
              {"columnName": "dic_03", "coloumNameCn": "底脚支撑块","minWidth":"100"},
              {"columnName": "dic_04", "coloumNameCn": "导向零件"},
              {"columnName": "dic_05", "coloumNameCn": "螺栓"},
              {"columnName": "dic_06", "coloumNameCn": "肘夹"},
              {"columnName": "dic_07", "coloumNameCn": "标识"},
              {"columnName": "dic_08", "coloumNameCn": "清洁"},
              {"columnName": "dic_09", "coloumNameCn": "润滑"},
              {"columnName": "dic_10", "coloumNameCn": "检查"},
            ],"minWidth":"200","status":"0"
          },
          {"columnName": "repairMan", "coloumNameCn": "保养但当"},
          {"columnName": "createTimeFt", "coloumNameCn": "保养时间","minWidth":"100"}

        ];
      },
      getBackData(pageNum,pageSize){
        this.getGzWbDetail(pageNum,pageSize)
      },

      getGzWbDetail(pageNum,pageSize) {
        let self = this;
        self.tableLoading = true;
        self.queryForm.pageNum = 0;
        self.queryForm.pageSize = 20;
        if(pageSize){
          self.queryForm.pageNum = pageNum;
          self.queryForm.pageSize = pageSize;
        }
        self.$http({
          url: "/autoMonitor/repair/queryWbHistoryList",
          method: "post",
          params:self.queryForm
        }).then(resp => {
          if (resp.success) {
            self.tableLoading = false;
            self.handleDefaultTab();
            for(let data of resp.result){
               data.createTimeFt = formatDate(new Date(data.createTime),"yyyy-MM-dd");
            }
            self.tableData = resp.result;
            self.backCount = resp.count;
          }
        });
      }
    }
  }
</script>
<style scoped>
  .wb .el-tag--small {
    height: 20px;
    padding: 0 4px;
    line-height: 17px;
  }
  .wb .el-input__inner {
    font-size: 11px;
  }
  .wb .el-select__tags-text {
    font-size: 11px;
  }
  .wb .el-select__tags {
    max-width: none !important;
  }
  .wb .el-date-editor.el-input,
  .userManage .el-date-editor.el-input__inner {
    width: auto;
  }
  .wb .buttonAdd {
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
  .wbForm .el-form-item {
    margin-bottom: 0px !important;
  }
  .wbForm .el-button--medium {
    padding: 5px 9px !important;
  }
  .wb .el-button--medium {
    padding: 5px 9px !important;
    font-size: 12px;
  }
  .wb .search {
    background: #34bfc6;
    border-color: #34bfc6;
  }
  .wb .bt_button {
    border-radius: 13px;
  }
  .add .el-button--medium {
    padding: 15px 30px !important;
  }
  .wbForm input {
    height: 26px !important;
    line-height: 26px !important;
  }
  .wbForm .el-form-item {
    margin-bottom: 0px !important;
  }
  .wb .el-table th>.cell {
    text-align: center !important;
  }
</style>
